import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
const styles = StyleSheet.create({
  pagination: {
    position: 'absolute',
    height: 5,
    left: 0,
    right: 0,
    bottom: 10,
    marginLeft: '30%',
    marginRight: '30%',
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center',
  },
  paginationItem: {
    borderRadius: 50,
    backgroundColor: 'rgba(255,255,255,0.9)',
    width: 5,
    height: 5,
    marginLeft: 3,
    marginRight: 3,
  },
  paginationItemActive: {
    borderRadius: 50,
    backgroundColor: 'rgba(255,255,255,1)',
    width: 15,
    height: 5,
    marginLeft: 3,
    marginRight: 3,
  },
});

const RenderPagination = ({list, active}) => {
  return (
    <View style={styles.pagination}>
      {list.map((item, index) => {
        return active === index ? (
          <Text style={styles.paginationItemActive} key={index} />
        ) : (
          <Text style={styles.paginationItem} key={index} />
        );
      })}
    </View>
  );
};
export default RenderPagination;
